/**
 * 
 */
window.onload = function() {
	lay2 = document.getElementById("lay2");
	menu=document.getElementById("menu");
	showItem=document.getElementById("showItem");
	A = setInterval('ff()', 1500);
	// 获得circle
	circle = document.getElementsByClassName("circle");// 数组
	for (var i = 0; i < circle.length; i++) {
		circle[i].style.top =450 - (i * 20) + "px";
		circle[i].style.left = 1100 + (i * 20) + "px";
	}
	//获得lay2的上下左右边距
	r=lay2.getBoundingClientRect();
	//通过lay2定位一级类别
	menu.style.top=r.top+"px";
	menu.style.left=r.left+"px";
	//获得一级目录的上下左右边距
	m=menu.getBoundingClientRect();
	//通过一级类别定位二级类别
	showItem.style.top=m.top+"px";
	showItem.style.left=m.right+"px";
}
function showItems(x,y){
	if(x==1){
		showItem.style.display="block";//鼠标经过显示
		//使鼠标可以放置在二级类别上
		showItem.addEventListener("mouseover", function() {
			showItems(1, y);
		});
		showItem.addEventListener("mouseout", function() {
			showItems(2);
		});
		//showItme.addEventListener
		var xhr=new XMLHttpRequest();
		xhr.open("get","good?action=selectItme&id="+y);
		xhr.send();
		xhr.onreadystatechange = function() {
			if(xhr.readyState==4&&xhr.status==200){
				var data = xhr.responseText;
				data=JSON.parse(data);
				while(showItem.children.length>0){//判断showItem是否有子节点
					showItem.removeChild(showItme.children[0]);//删除子孩子，目的是鼠标移动不在继续刷新
				}
				for(var xb in data){
					var good=data[xb];
				// console.log(catalog);//前端浏览器的控制台
				var show_item = document.createElement("div");// <div></div>
				show_item.style.width = "80px";
				show_item.style.height = "80px";
				show_item.style.float = "left";
				//show_item.style.backgroundColor = "#875";
					
				var item_pic = document.createElement("div");
				item_pic.style.margin = "auto";
				item_pic.style.width = "50px";
				item_pic.style.height = "50px";
				show_item.appendChild(item_pic);
				
				var a_href=document.createElement("a");
				a_href.href="goods?action=selectByCid&id="+good.gid; 
				
				var img = document.createElement("img");
				img.src = good.gpic;// CSS属性和HTML属性
				img.style.width = "50px";
				img.style.height = "50px";
				a_href.appendChild(img);
				item_pic.appendChild(a_href);
					
				var item_name = document.createElement("div");
				item_name.innerHTML =good.gname;
				item_name.style.width = "80px";
				item_name.style.height = "30px";
				item_name.style.textAlign = "center";
				item_name.style.lineHeight = "30px";
				item_name.style.fontSize = "12px";
				show_item.appendChild(item_name);
					
				showItem.appendChild(show_item);//相当于</div>
				}
			}
		}
	}
 if(x==2){
		showItem.style.display="none";//鼠标离开隐藏
	}
}
var i = 0;
function ff() {
	lay2.scrollLeft = i;// 滚动条的左间距
	// 轮播图的圈
	// 0--1图--circle[0]
	// 1200--2圈--circle[1]
	circle[i / 1200].style.backgroundColor = "#0f0";
	if (i / 1200 == 0) {
		circle[2].style.backgroundColor = "#fff";
	} else
		circle[i / 1200 - 1].style.backgroundColor = "#fff";
	i += 1200;
	if (i == 3600)// 0 1200 2400
		i = 0;
}
function showImg(x) {
	// x=1,i=0
	// x=2,i=1200
	i = (x - 1) * 1200;
	lay2.scrollLeft = i;
	
	circle[x-1].style.backgroundColor = "#0f0";
	for(var j=0;j<circle.length;j++){
		if(j!=(x-1)){
			circle[j].style.backgroundColor = "#fff";
		}
	}
}